چگونه در جی کوئری تگی را برای اعمال افکت انتخاب کنیم
نوشته شده توسط : مهمان نواز


هر زبانی برای اینکه تغییری در المانی تولید نماید. طراحی سایت شرکتی  می بایست راهی برای فراخوانی آن داشته باشد در کتابخانه جی کوئری selectors عمل تعیین المان ها در Html را انجام می دهند.

jQuery Selectors :
انتخابگرها در جی کوئری به شما اذن تعیین و اعمال افکت به تگ های HTML را میدهند. انتخابگرها براساس اسم تگ ، ID،کلاس،نوع صفت ، مقدار صفت و ... یک تگ را گزینش می نمایند ، گزینش گرهای جی کوئری براساس گزینش گرهای CSS ساخت گردیده اند و به آن ها انتخابگرهای جدیدی نیز افزوده شده‌است.

هر انتخابگر در جی کوئری با یک نماد $ شروع میشود.

تعیین با به کار گیری از اسم تگ
برای گزینش کل موادسازنده از یک مال می‌توانید موادتشکیل دهنده را با اسم آن ها فراخوانی فرمائید. از جمله در شرایطی‌که بخواهید که به کل تگ های
در شیت

افکتی بدهید از این فرمان تحت برای تعیین کل تگهای p استعمال خواهید کرد:

$(\"p\")

نمونه:

زمانی که استفاده کننده روی دکمه کلیک کرد کل تگ های P پنهان خواهند شد:

$(document).ready(function(){
$(\"button\").click(function(){
$(\"p\").hide();
});
});

مشاهده سود

 

گزینش یک تگ براساس ID
در حالتی‌که بخواهیم که افکتی به یک تگ خاصیت اعمال خواهد شد می توانیم از id آن تگ استعمال کنیم ، برای اینکه عنصری را با یک id خاص گزینش فرمائید از فرمان ذیل به کارگیری فرمائید:

$(\"#test\")

نمونه:

هنگامیکه یوزرها روی دکمه کلیک نمایند تگی که id=\"test\" داراست پنهان میگردد:

$(document).ready(function(){
$(\"button\").click(function(){
$(\"#test\").hide();
});
});

مشاهده سود

 

تعیین تگ ها با امداد کلاس
در شرایطی‌که بخواهیم یکسری تگ را با خصوصیت مشخصی تعیین کنیم می‌توانیم آن‌ها را براساس کلاس گزینش نماییم برای اینکار از فرمان پایین به کار گیری می‌کنیم:

$(\".test\")

نمونه

هنگامی که مخاطب روی دکمه کلیک کرد ، کل تگ های دارنده کلاس class=\"test\" پنهان می شوند:

$(document).ready(function(){
$(\"button\").click(function(){
$(\".test\").hide();
});
});

مشاهده فیض

نمونه های بیشتر از انتخابگرهای جی کوئری:

 

انتخابگر

توضیحات

نمونه

$(\"*\")

تعیین همگی تگها

مشاهده کد

$(this)

تعیین تگی که کد جی کوئری در آن مندرج میباشد

مشاهده کد

$(\"p.intro\")

گزینش کلیه تگ های p که کلاس class=\"intro\" دارا هستند.

مشاهده کد

$(\"p:first\")

گزینش او‌لین تگ


مشاهده کد

$(\"ul li:first\")

گزینش

او‌لین عنصر
در اولی


مشاهده کد

$(\"ul li:first-child\")

تعیین اولی li درهمه ul ها

مشاهده کد

$(\"[href]\")

تعیین کلیه تگ ها که که صفت href دارا‌هستند

مشاهده کد

$(\"a[target=\'_blank\']\")

گزینش همگی موادسازنده با صفت target=_blank

مشاهده کد

$(\"a[target!=\'_blank\']\")

گزینش همگی تگ های که صفت target نا هم اندازه با blank باشد.

مشاهده کد

$(\":button\")

تعیین مجموع دکمه ها وتمام تگ های input که نوع type=\"button\" دارا هستند.

مشاهده کد

$(\"tr:even\")

گزینش کل سطرهای زوج تگ

مشاهده کد

$(\"tr:odd\")

گزینش همگی عناصرفرد تگ

مشاهده کد

 

قراردادن کدها در فولدر جدا
در حالتی‌که تارنما شما تعداد متعددی برگه داراست و قصد به کارگیری از افکت های جی کوئری را دارید. می‌توانید کد های جی کوئری را در فایلی غیروابسته ذخیره فرمائید و در هر شیت تارنما با یک خط کد این کد ها را فرا خوانی نمایید. پسوند فولدر های جی کوئری بصورت js. می باشد.


<\"script src=\"http://www.sargonco.com/Uploads/Public/article/webdistut/javascript/jquery-3.2.1.min.js\">

 





:: برچسب‌ها: طراحی سایت شرکتی ,
:: بازدید از این مطلب : 25
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : یک شنبه 30 آذر 1399 | نظرات ()
مطالب مرتبط با این پست
لیست
می توانید دیدگاه خود را بنویسید


نام
آدرس ایمیل
وب سایت/بلاگ
:) :( ;) :D
;)) :X :? :P
:* =(( :O };-
:B /:) =DD :S
-) :-(( :-| :-))
نظر خصوصی

 کد را وارد نمایید:

آپلود عکس دلخواه: